<template>
  <div>
    <div class="div1">
      <div class="div1-1">
        <router-link to="/"
          ><img src="../assets/imgs/xiaomilogo.png" class="imgLOGO" alt=""
        /></router-link>
      </div>
      <div class="div1-2">
        <span class="span1">确认订单</span>
      </div>
      <div class="div1-3">
        <el-button type="text" style="color: black" v-if="Username">{{
          this.Username
        }}</el-button>
        <el-button
          type="text"
          style="color: black"
          @click="$router.push('/Load')"
          v-if="!Username"
          >登录</el-button
        >
        <el-button
          type="text"
          style="color: black"
          @click="$router.push('/Load')"
          v-if="!Username"
          >注册</el-button
        >
      </div>
    </div>
    <div class="div2">
      <div class="div2-1">
        <div class="div2-1-1">
          <span class="span3">收货地址</span>
          <span class="span4"
            >抢购以最终支付成功为准，加购后请尽快付款，避免抢购失败</span
          >
        </div>
        <div class="div2-1-2">
          <el-card
            shadow="hover"
            class="card1"
            v-for="(item, index) in Sitedata"
            :key="index"
          >
            <el-button
              class="button3"
              icon="el-icon-delete"
              size="mini"
              circle
              type="text"
              @click="DelSite(item.Sid)"
            ></el-button>
            <el-button
              class="button3"
              icon="el-icon-edit"
              size="mini"
              circle
              type="text"
              @click="fan(item)"
            ></el-button>

            <h3>{{ item.Sname }}</h3>
            <p>{{ item.Sphone }}</p>
            <p>{{ item.shengname + item.shiname + item.xianname }}</p>
            <p>{{ item.Sadds }}</p>
          </el-card>
          <el-button class="cardbutton" @click="ADDS()">
            <el-card shadow="hover" class="card1">
              <span class="span6">添加新地址</span>
            </el-card>
          </el-button>
        </div>
        <div class="div2-1-1">
          <span class="span3">商品</span>
        </div>
        <div class="div2-1-3">
          <el-table
            :data="Check.AllSelection"
            :show-header="false"
            style="width: 100%; margin-left: 20px"
          >
            <el-table-column width="50px" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                <img :src="scope.row.Cimg" alt="" class="tabimg" />
              </template>
            </el-table-column>

            <el-table-column width="230px" prop="Cname"> </el-table-column>

            <el-table-column width="550px" align="right" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ scope.row.Cprice }}元×{{ scope.row.Ssum }}</span>
              </template>
            </el-table-column>

            <el-table-column width="350px" align="right" show-overflow-tooltip>
              <template slot-scope="scope">
                <span style="color: #ff6700"
                  >¥{{ scope.row.Cprice * scope.row.Ssum }}</span
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-divider class="divder"></el-divider>
        <div class="div2-1-4">
          <span class="span3">配送方式</span>
          <span class="span5">包邮</span>
        </div>
        <el-divider class="divder"></el-divider>
        <div class="div2-1-4">
          <span class="span3">发票</span>
          <span class="span5">电子普通发票</span>
        </div>
        <div class="div2-1-5">
          <div class="div-tiem">
            <div class="div-name">商品件数:</div>
            <div class="div-money">{{ Check.Sumsumaa }}件</div>
          </div>
          <div class="div-tiem">
            <div class="div-name">商品总价:</div>
            <div class="div-money">{{ Check.Sumprice }}元</div>
          </div>
          <div class="div-tiem">
            <div class="div-name">活动优惠:</div>
            <div class="div-money">-0元</div>
          </div>
          <div class="div-tiem">
            <div class="div-name">优惠抵扣券:</div>
            <div class="div-money">-0元</div>
          </div>
          <div class="div-tiem">
            <div class="div-name">运费:</div>
            <div class="div-money">0元</div>
          </div>
          <div class="div-tiem1">
            <div class="div-name">应付总额:</div>
            <div class="div-money1">{{ Check.Sumprice }}元</div>
          </div>
        </div>
        <el-divider class="divder"></el-divider>
        <div class="div2-1-6">
          <el-button class="button2" @click="addOrder()">去结算</el-button>
        </div>
      </div>
      <!-- 地址添加 -->
      <div>
        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="收货人:" :label-width="formLabelWidth">
              <el-input
                v-model="form.Sname"
                autocomplete="off"
                style="width: 180px"
              ></el-input>
            </el-form-item>

            <el-form-item :label-width="formLabelWidth" label="地址:">
              <el-select
                v-model="form.shengid"
                placeholder="选择省份"
                style="width: 180px; margin-right: 10px"
                @change="showshi"
              >
                <el-option
                  v-for="item in options1"
                  :key="item.Xid"
                  :label="item.Xname"
                  :value="item.Xid"
                >
                </el-option>
              </el-select>

              <el-select
                v-model="form.shiid"
                placeholder="选择城市"
                style="width: 180px; margin-right: 10px"
                @change="showxian"
              >
                <el-option
                  v-for="item in options2"
                  :key="item.Xid"
                  :label="item.Xname"
                  :value="item.Xid"
                >
                </el-option>
              </el-select>

              <el-select
                v-model="form.xianid"
                placeholder="选择区/县"
                style="width: 180px; margin-right: 10px"
              >
                <el-option
                  v-for="item in options3"
                  :key="item.Xid"
                  :label="item.Xname"
                  :value="item.Xid"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="详细地址:" :label-width="formLabelWidth">
              <el-input
                v-model="form.Sadds"
                autocomplete="off"
                style="width: 400px"
              ></el-input>
            </el-form-item>

            <el-form-item label="收货电话:" :label-width="formLabelWidth">
              <el-input
                v-model="form.Sphone"
                autocomplete="off"
                style="width: 400px"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="AddSite()">确 定</el-button>
          </div>
        </el-dialog>
      </div>
      <!-- 修改地址 -->
      <div>
        <el-dialog title="收货地址" :visible.sync="dialogFormVisibl">
          <el-form :model="Sitedatafan">
            <el-form-item label="收货人:" :label-width="formLabelWidth">
              <el-input
                v-model="Sitedatafan.Sname"
                autocomplete="off"
                style="width: 180px"
              ></el-input>
            </el-form-item>

            <el-form-item :label-width="formLabelWidth" label="地址:">
              <el-select
                v-model="Sitedatafan.shengid"
                placeholder="选择省份"
                style="width: 180px; margin-right: 10px"
                @change="showshi"
              >
                <el-option
                  v-for="item in options1"
                  :key="item.Xid"
                  :label="item.Xname"
                  :value="item.Xid"
                >
                </el-option>
              </el-select>

              <el-select
                v-model="Sitedatafan.shiid"
                placeholder="选择城市"
                style="width: 180px; margin-right: 10px"
                @change="showxian"
              >
                <el-option
                  v-for="item in options2"
                  :key="item.Xid"
                  :label="item.Xname"
                  :value="item.Xid"
                >
                </el-option>
              </el-select>

              <el-select
                v-model="Sitedatafan.xianid"
                placeholder="选择区/县"
                style="width: 180px; margin-right: 10px"
              >
                <el-option
                  v-for="item in options3"
                  :key="item.Xid"
                  :label="item.Xname"
                  :value="item.Xid"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="详细地址:" :label-width="formLabelWidth">
              <el-input
                v-model="Sitedatafan.Sadds"
                autocomplete="off"
                style="width: 400px"
              ></el-input>
            </el-form-item>

            <el-form-item label="收货电话:" :label-width="formLabelWidth">
              <el-input
                v-model="Sitedatafan.Sphone"
                autocomplete="off"
                style="width: 400px"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisibl = false">取 消</el-button>
            <el-button type="primary" @click="UpStie()">修改</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      Username: "",
      Sitedata: {}, //地址显示
      Sitedatafan: {}, //联动反填
      form: {}, //添加
      Check: {
        AllSelection: [],
        Sumprice: "",
        Sumsumaa: "",
      }, //全选数据
      dialogFormVisible: false, //修改模态
      dialogFormVisibl: false, //修改模态
      options1: [], //省
      options2: [], //市
      options3: [], //县
      formLabelWidth: "80px",
      a: 1, //判断联动
      Osid: 0, //判断地址是否有默认值
      formA: {
        orderFormA: {},
        orderFormB: [],
      },
    };
  },
  methods: {
    //添加地址
    AddSite() {
      console.log(this.form);
      this.form.Suid = sessionStorage.getItem("Uid");
      this.$axios
        .post("http://localhost:16673/api/Site/AddSite", this.form)
        .then((res) => {
          if (res.data > 0) {
            alert("添加成功");
            this.showSite();
            this.dialogFormVisible = false;
          } else {
            alert("添加失败");
          }
        });
    },
    //删除地址
    DelSite(Sid) {
      this.$axios
        .get("http://localhost:16673/api/Site/DelSite?Sid=" + Sid)
        .then((res) => {
          if (res.data > 0) {
            this.showSite();
          } else {
            this.showSite();
          }
        });
    },
    //弹出添加地址模态框
    ADDS() {
      this.options1 = []; //省
      this.options2 = []; //市
      this.options3 = []; //县
      console.log(this.options3);
      this.dialogFormVisible = true;
      this.showsheng();
      this.a = 1;
    },
    //弹出反填模态框
    fan(item) {
      this.Sitedatafan = item;
      this.form.shengid = item.shengid;
      this.form.shiid = item.shiid;
      this.showsheng();
      this.showshi();
      this.showxian();
      this.dialogFormVisibl = true;
      console.log(item);
      this.a = 2;
    },
    //修改地址
    UpStie() {
      this.Sitedatafan.Suid = sessionStorage.getItem("Uid");
      this.$axios
        .post("http://localhost:16673/api/Site/UpStie", this.Sitedatafan)
        .then((res) => {
          if (res.data > 0) {
            alert("修改成功");
            this.dialogFormVisibl = false;
            this.showSite();
          } else {
            alert("修改失败");
          }
        });
    },
    //加载省
    async showsheng() {
      await this.$axios
        .get("http://localhost:16673/api/Site/getSsx?Ssid=0")
        .then((res) => {
          this.options1 = res.data;
        });
    },
    //加载市
    async showshi() {
      if (this.a == 1) {
        var b = this.form.shengid;
      } else {
        b = this.Sitedatafan.shengid;
      }
      this.option2 = [];
      this.option3 = [];
      await this.$axios
        .get("http://localhost:16673/api/Site/getSsx?Ssid=" + b)
        .then((res) => {
          this.options2 = res.data;
        });
    },
    //加载县
    async showxian() {
      if (this.a == 1) {
        var b = this.form.shiid;
      } else {
        b = this.Sitedatafan.shiid;
      }
      this.option3 = [];
      await this.$axios
        .get("http://localhost:16673/api/Site/getSsx?Ssid=" + b)
        .then((res) => {
          this.options3 = res.data;
        });
    },
    //加载地址信息
    showSite() {
      this.$axios
        .get(
          "http://localhost:16673/api/Site/getSite?Suid=" +
            sessionStorage.getItem("Uid")
        )
        .then((res) => {
          this.Sitedata = res.data;
        });
    },
    //添加订单
    addOrder() {
      if (this.Osid == 0) {
        //判断地址
        this.formA.orderFormA.Osid = this.Sitedata[0].Sid;
      } else {
        this.formA.orderFormA.Osid = this.Osid;
      }
      this.formA.orderFormA.ouid = sessionStorage.getItem("Uid"); //用户外键
      this.formA.orderFormA.countprice = this.Check.Sumprice;
      //循环赋值子表
      for (let index = 0; index < this.Check.AllSelection.length; index++) {
        let aa = {
          fid: 0,
          fanumber: "",
          fcid: 0,
          fsun: 0,
        };
        aa.fcid=this.Check.AllSelection[index].Cid
        aa.fsun=this.Check.AllSelection[index].Ssum

        this.formA.orderFormB.push(aa)
      }
      this.$axios
        .post("http://localhost:16673/api/Order/AddOrder",this.formA)
        .then((res) => {
          if (res.data.sql > 0) {           
            alert("添加成功");
            this.formA={}
            this.$router.push("/Payment?onumber="+res.data.onumber)
          } else {
            alert("添加失败");
            this.formA={}
          }
        });
    },
  },
  created: function () {
    //反序列化接收值
    this.Check = JSON.parse(this.$route.query.Check);
    this.Username = sessionStorage.getItem("Username");
    this.showSite();
    this.showsheng();
  },
};
</script>

<style scoped>
.div1 {
  margin: 0 auto;
  width: 100%;
  height: 100px;
  margin-top: 8px;
  border-bottom: 3px solid #ff6700;
}
.div1-1 {
  float: left;
  margin-top: 5px;
}
.div1-2 {
  float: left;
  height: 100px;
  line-height: 90px;
  margin-left: 30px;
}
.div1-3 {
  float: right;
  line-height: 100px;
  margin-right: 135px;
}
.imgLOGO {
  width: 65px;
  margin-left: 125px;
  margin-top: 7px;
}
.span1 {
  color: #424242;
  font-size: 30px;
}
.div2 {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  /* 不会跟随内嵌盒子移动 */
  overflow: hidden;
}
.div2-1 {
  width: 1240px;
  height: 100%;
  margin: 0 auto;
  background-color: white;
  margin-top: 50px;
  margin-bottom: 50px;

  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}
.div2-1-1 {
  width: 1240px;
  height: 50px;
  margin-top: 40px;
}
.span3 {
  font-size: 23px;
  float: left;
  line-height: 50px;
  margin-left: 30px;
}
.span4 {
  font-size: 15px;
  float: left;
  line-height: 55px;
  margin-left: 30px;
}
.span5 {
  font-size: 18px;
  float: left;
  line-height: 50px;
  margin-left: 100px;
  color: #ff6700;
}
.div2-1-2 {
  width: 1240px;
  height: 200px;
  margin-left: 30px;
  float: left;
  margin-bottom: 20px;
}
.div2-1-4 {
  float: left;
  width: 1240px;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-bottom: 20px;
}
.card1 {
  width: 280px;
  height: 199px;
  float: left;
  margin-right: 20px;
}
.tabimg {
  width: 30px;
}
.divder {
  float: left;
  width: 1200px;
  margin-top: 20px;
  margin-left: 20px;
}
.div2-1-5 {
  width: 200px;
  height: 180px;
  float: right;
  font-size: 15px;
  margin-right: 50px;
}
.div2-1-6 {
  float: left;
  width: 1240px;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-bottom: 20px;
}

.div-tiem {
  overflow: hidden;
  width: 200px;
  margin-bottom: 10px;
}
.div-tiem1 {
  overflow: hidden;
  width: 200px;
  height: 30px;
  margin-bottom: 10px;
  margin-top: 20px;
  line-height: 30px;
}
.div-name {
  width: 80px;
  float: left;
  text-align: right;
}
.div-money {
  color: #ff6700;
  float: right;
}
.div-money1 {
  color: #ff6700;
  float: right;
  font-size: 30px;
}
.button2 {
  float: right;
  width: 200px;
  height: 50px;
  border-radius: 0px;
  border: 0px;
  background-color: #ff6700;
  color: white;
  font-size: 20px;
  vertical-align: top;
  line-height: -100px;
  margin-right: 50px;
}
.button3 {
  float: right;
  padding: 0;
  margin-right: 20px;
}
.cardbutton {
  width: 200px;
  height: 199px;
  float: left;
  margin-right: 20px;
  padding: 0;
  border: 0px;
}
.span6 {
  line-height: 160px;
  color: #b0b0b0;
}
</style>
<style >
.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border-bottom: 0px;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
  content: none;
}
</style>